<template>
<div id="ChooseUser" class="page-blank">
  <van-nav-bar title="选择人员" left-arrow @click-left="close()"/>
  <van-search v-model="searchValue" placeholder="请输入搜索关键词" show-action shape="round">        
    <div class="ft-blue" slot="action" @click="getList">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-radio-group v-model="value">
      <van-cell-group>
        <van-cell :title="item.title" clickable @click="checkItem( item )" v-for="item in list" :key="item.userId">
          <van-radio slot="right-icon" :name="item.userId" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ChooseUser extends Vue {

  @Prop()
  cb: any

  @Prop()
  close: any

  @Prop()
  roleType: any

  @Prop()
  oldValue: any

  searchValue: any = ''
  value: any = ''
  list: any = ''
  roleTypeName: any = [ '管理员', '代理', '业务员', '商户' ]

  checkItem(item: any) {
    this.cb(item);
  }

  getList() {
    let page = 1, size = 10, vague = this.searchValue, roleType = this.roleType, userId = this.$store.state.userInfo.userId;
    axios.get('/api/roleController/getUserAllSubordinate', { page, size, vague, roleType, userId }).then((res: any) => {
      let json = res || {};      
      let list: any = json.list || [];
      list.forEach((ele: any, index: number) => {
        if (ele.roleType == 1) {
          if (ele.pid == 10000) {
            ele.title = `一级${ this.roleTypeName[ ele.roleType ] }:${ ele.nick }(${ ele.userName })(${ ele.userId })`;
          } else {
            ele.title = `二级${ this.roleTypeName[ ele.roleType ] }:${ ele.nick }(${ ele.userName })(${ ele.userId })`;
          }
        } else {
          ele.title = `${ this.roleTypeName[ ele.roleType ] }:${ ele.nick }(${ ele.userName })(${ ele.userId })`;
        }
        this.list = list;
      });
    })
  }

  mounted() {
    this.value = this.oldValue;
    this.getList();
  }
  
};
</script>

<style lang="scss">
#ChooseUser {
}
</style>

